<template>
  <div class="card-out-container">
    <CustomTable storeTableName="styleProcessLibraryList" rowKey="id" :loading="loading" :dataSource="dataSource" :columns="columns" :rowSelection="isEnvLocal ?null:{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, fixed: 'left' }" :pagination="ipagination" :scroll="{x: 1000, y: 'calc(100vh - 320px)'}" @change="handleTableChange">
      <template #operateLeft>
        <div class="operate-left">
          <a-button v-if="isEnvLocal" type="primary" @click="syncData(syncDataAry)">{{$t('common.sync')}}</a-button>
          <span v-else>
            <a-button v-if="hasPermission('basic:styleprocess:add')" type="primary" :disabled="!queryParam.styleId" @click="handleUniqueAdd">{{$t('common.addNew')}}</a-button>
            <a-button v-if="hasPermission('basic:styleprocess:batchadd')" type="primary" :disabled="!queryParam.styleId" @click="addFromList">{{ $t('other.basicProcessAdd') }}</a-button>
            <a-button ghost v-if="hasPermission('basic:styleprocess:delete')" type="warning" :disabled="!selectedRowKeys.length" @click="handleDelete(null)">{{$t('common.delMore')}}</a-button>
            <a-button ghost type="primary" @click="()=> handleExportXls(url.templateUrl, $t('other.styleProcessMode'))">{{$t('common.downMode')}}</a-button>
            <a-upload v-if="hasPermission('basic:styleprocess:import')" name="file" :action="url.uplaodUrl" :headers="uploadHeaders" @change="handleImportExcel" :show-upload-list="false" :before-upload="beforeUpload">
              <a-button ghost type="primary">{{$t('common.importExcel')}}</a-button>
            </a-upload>
            <a-button ghost v-if="hasPermission('basic:styleprocess:export')" type="primary" @click="()=> handleExportXls(url.exportUrl, $t('menu.basic:styleprocess'), true)">{{$t('common.outputExcel')}}</a-button>
          </span>
        </div>
      </template>
      <template #operateRight>
        <a-form layout="inline">
          <a-form-item>
            <a-select v-model:value="queryParam.styleId" :placeholder="$t('other.pleaseSelectStyle')" allowClear>
              <a-select-option v-for="(item,index) in styleList" :value="item.value" :key="index">{{ item.label }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-space>
            <a-button type="primary" @click="loadData">{{$t('common.see')}}</a-button>
            <a-button @click="searchReset">{{$t('common.reset')}}</a-button>
          </a-space>
        </a-form>
      </template>
      <template #bodyCell="{ scope }">
        <template v-if="scope.column.key === 'code'">
          <span v-if="hasPermission('basic:styleprocess:get')" class="code-link" @click="handleDrawDetail(scope.record)">{{scope.record.code}} </span>
          <span v-else>{{scope.record.code}}</span>
        </template>
        <template v-else-if="scope.column.key === 'status'">
          <a-switch :disabled="!hasPermission('basic:styleprocess:edit') || isEnvLocal" :checked="!Boolean(scope.record.status)" @change="(value) => changeStatus(value, scope.record)" />
        </template>
        <template v-else-if="scope.column.key === 'standardSeconds'">
          <span>{{scope.record.standardSeconds && formatSeconds(scope.record.standardSeconds)}}</span>
        </template>
        <template v-else-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button v-if="hasPermission('basic:styleprocess:edit')" type="link" class="primary-link" @click="handleEdit(scope.record)">{{$t('common.editor')}}</a-button>
            <a-divider type="vertical" />
            <a-button v-if="hasPermission('basic:styleprocess:delete')" type="link" class="warning-link" @click="handleDelete(scope.record.id)">{{$t('common.del')}}</a-button>
          </span>
        </template>
      </template>
    </CustomTable>
    <commone-modal ref="modalForm" tableName="styleProcessLibrary" :cloSapn="8" layout="vertical" :modalWidth="870" :modalTitle="$t('other.styleProcess')" @ok="modalFormOk">
    </commone-modal>
    <process-modal ref="processModal" :sectionList="sectionList" @ok="modalFormOk"></process-modal>
    <detail-draw ref="detailForm"></detail-draw>
    <SyncDataModal ref="syncDataModalRef" />
  </div>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import CommoneModal from '@/components/commonModal/normalModal.vue'
import DetailDraw from './modules/detailDraw.vue'
import ProcessModal from './modules/processModal.vue'
import { getBaseUrl, hasPermission, formatSeconds } from '@/utils'
import { store } from '@/store'
import { mapState } from 'vuex'
import CustomTable from '@/components/commonTable/customTable.vue'
import { normalColumns, localColumns } from './modules/config'
import SyncDataModal from '@/components/syncModal/syncDataModal.vue'
export default {
  name: 'styleProcessLibrary',
  mixins: [ListMixinPm],
  components: {
    CommoneModal,
    DetailDraw,
    ProcessModal,
    CustomTable,
    SyncDataModal
  },
  computed: {
    ...mapState({
      styleList: (state) => state.normalData.styleList,
      sectionList: (state) => state.normalData.sectionList
    }),
  },
  data () {
    return {
      showMore: true,
      url: {
        list: '/api/basic/style-process/page',
        delete: '/api/basic/style-process/delete',
        templateUrl: '/api/basic/style-process/export-template',
        exportUrl: '/api/basic/style-process/export-style-process',
        uplaodUrl: `${getBaseUrl(process.env.NODE_ENV)}/api/basic/style-process/import-data`,
        sync: '/api/system/iot/sync-cloud-data'
      },
      columns: [],
      syncDataAry: [
        { syncIotCloudDataType: 'ihs:production:styleProcess' },
        { syncIotCloudDataType: 'ihs:production:style' },
        { syncIotCloudDataType: 'ihs:basic:color' },
        { syncIotCloudDataType: 'ihs:basic:size' },
        { syncIotCloudDataType: 'ihs:basic:productPart' }
      ]
    }
  },
  methods: {
    formatSeconds,
    hasPermission,
    initModalSelectOptions () {
      return {
        styleId: this.styleList,
        section: this.sectionList
      }
    },
    handleUniqueAdd () {
      const { styleId } = this.queryParam
      if (styleId) {
        this.handleEdit({ styleId }, false)
      } else {
        this.$message.warning('请先选择一个款式')
      }
    },
    addFromList () {
      const { styleId } = this.queryParam
      if (styleId) {
        this.$refs.processModal.open(styleId)
      } else {
        this.$message.warning('请先选择一个款式')
      }
    }
  },
  created () {
    this.columns = this.isEnvLocal ? localColumns : normalColumns
    store.dispatch('getStyle')
    store.dispatch('getSection')
  }
}
</script>